<template>
  <van-list v-model="loading" :finished="finished" @load="onLoad">
    <template v-if="list.length > 0">
      <div class="message" v-for="item in list" :key="item.id">
        <van-swipe-cell class="item" :id="item.id" :right-width="65" :on-close="onClose">
          <div class="content" @click="toDetail(item.id)">
            <div class="top">
              <span class="type">{{item.title}}</span>
              <span class="time">{{item.create_time | format}}</span>
            </div>
            <div class="footer">
              <p class="info ellipsis">{{item.content}}</p>
              <template v-if="item.is_read == '0'">
                <div class="badge">
                  <Badge :badge="1"/>
                </div>
              </template>
            </div>
          </div>
          <span slot="right">删除</span>
        </van-swipe-cell>
      </div>
    </template>
    <template v-else>
      <EmptyTips v-if="isLoad" text="无消息记录" mWidth="30" mHeight="30" :image="NoTicketEmpty"/>
    </template>
  </van-list>
</template>

<script>
import { timeAgo } from "../../tools/time";
import Badge from "@/components/common/Badge";
import EmptyTips from "@/components/common/EmptyTips";
import NoTicketEmpty from "../../assets/common/no-ticket-empty.png";
var onLoadTimer = null;

import api from "../../api";
import { clearTimeout } from "timers";
export default {
  title: "消息中心",
  components: {
    Badge,
    EmptyTips
  },
  filters: {
    format(value) {
      var text = timeAgo(value);
      return text;
    }
  },
  data() {
    return {
      NoTicketEmpty,
      uid: this.$store.state.uid,
      list: [],
      loading: false,
      finished: false,
      page: 1,
      isLoad: false
    };
  },
  methods: {
    toDetail(id) {
      this.$routerPush(this, `/pages/message/MessageDetail?id=${id}`);
    },
    clearList() {
      this.list = [];
      this.page = 1;
    },
    onLoad() {
      window.clearTimeout(onLoadTimer);
      onLoadTimer = window.setTimeout(() => {
        api.message.getMessageList(
          this.uid,
          this.page,
          res => {
            this.isLoad = true;
            if (res.pager.totalPages <= res.pager.nowPage) {
              this.loading = false;
              this.finished = true;
            }

            if (res.data.length < 1) {
              this.finished = true;
            } else {
              for (var i = 0; i < res.data.list.length; i++) {
                this.list.push(res.data.list[i]);
              }
              this.page += 1;
              this.loading = false;
            }
          },
          res => {
            this.loading = false;
            this.finished = true;
            this.$toast(res.msg);
          }
        );
      }, 200);
    },
    onClose(clickPosition, instance) {
      let id = instance.$el.id;

      this.$dialog
        .confirm({
          message: "确定删除吗？"
        })
        .then(() => {
          console.log(instance.$el.id)
          api.usercenter.deleteMessage(id, res => {
            this.$toast(`删除成功`);
            this.clearList();
            this.onLoad();
          });
          instance.close();
        })
        .catch(() => {
          instance.close();
          console.log("关闭");
        });
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.message {
  border-bottom: 1px solid #f9f9f9;
  .item {
    .content {
      margin: 0 2vw;
      padding-left: 2vw;
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2vw;
      .type {
        font-size: 4vw;
        color: #333;
      }
      .time {
        color: #999;
        margin-right: 5vw;
        font-size: 3.5vw;
      }
    }
    .footer {
      position: relative;
      .info {
        color: #999;
      }
      .badge {
        position: absolute;
        right: 2.5vw;
        top: 0;
      }
    }
  }
}
</style>